<template>
  <view>
    <!-- 购物车为空时 -->
    <view class="cart-empty" v-if="cart.length === 0">
      <image src="../../static/MyNeko-home.jpg" mode="heightFix" style="{width: 200rpx};"></image>
      <text>喵...(空空如也)</text>
    </view>
    <!-- 购物车有值时 -->
    <view class="cart-container" v-else>
      <!-- 收货地址区 -->
      <myAddress></myAddress>
      <!-- 购物车标题区 -->
      <view class="cart-title">
        <uni-icons type="shop" size="18"></uni-icons>
        <text class="cart-title-text">购物车</text>
      </view>
      <!-- 购物车列表 -->
      <uni-swipe-action class="uni-swiper">
        <block v-for="(item,i) in cart" :key="i">
          <uni-swipe-action-item :right-options="options" @click="swiperClickHandle(item)">
            <!-- 商品列表区 -->
            <cartList :cartList="item" :showRadio="true" @radio-change="handleRadio" @num-change="handleNum"></cartList>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
      <!-- 结算区-->
      <settle></settle>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
  } from 'vuex'
  import badgeMix from '@/mixins/tabbar-badge.js'
  import settle from '@/componets/settle/settle.vue'
  import cartList from '@/componets/cartList/cartList.vue'
  import myAddress from '@/componets/address/address.vue'
  export default {
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000 '
          }
        }]
      }
    },
    methods: {
      // 映射方法
      ...mapMutations('modulesCart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
      // 监听 radio 选择变化
      handleRadio(e) {
        this.updateGoodsState(e)
      },
      // 监听数字选择器变化
      handleNum(e) {
        this.updateGoodsCount(e)
      },
      //  监听滑块点击.这里是
      swiperClickHandle(e) {
        this.removeGoodsById(e.goods_id)
      }
    },
    onShow() {},
    components: {
      cartList,
      myAddress,
      settle
    },
    computed: {
      ...mapState('modulesCart', ['cart'])
    },
    mixins: [badgeMix]
  }
</script>

<style lang="less">
  .cart-empty {
    text-align: center;
    
  }
  
  .cart-title {
    display: flex;
    justify-items: center;
    padding: 10rpx;
    border: 2px  solid #efefef;

    .cart-title-text {
      margin-left: 10rpx;
      font-size: 14px;
    }
  }

  .uni-swiper {
    width: 100%;
  }
</style>
